<template>
  <div class="about-page">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">关于我们</h1>
        <p class="page-subtitle">专业的宠物用品提供商，用心守护每一个毛孩子</p>
      </div>

      <!-- 公司介绍 -->
      <section class="company-intro">
        <div class="intro-content">
          <div class="intro-text">
            <h2>我们的使命</h2>
            <p v-if="companyInfo.mission">{{ companyInfo.mission }}</p>
            <p v-else>
              宠物商城致力于为宠物主人提供最优质的宠物用品和服务。我们深知宠物对于家庭的重要性，
              它们不仅是陪伴，更是家庭的一员。因此，我们精心挑选每一件商品，确保品质与安全，
              让您的爱宠享受最好的生活品质。
            </p>
            
            <p v-if="companyInfo.description">{{ companyInfo.description }}</p>
            
            <h3>为什么选择我们？</h3>
            <ul class="features-list">
              <li 
                v-for="(feature, index) in (companyInfo.features || ['严格的品质把控，所有商品均经过专业检测', '丰富的产品种类，满足不同宠物的需求', '专业的客服团队，为您提供贴心咨询服务', '快速的物流配送，让您的爱宠及时获得所需'])"
                :key="index"
              >
                <el-icon class="feature-icon"><Checked /></el-icon>
                <span>{{ feature }}</span>
              </li>
            </ul>
          </div>
          
          <div class="intro-image">
            <div class="company-logo-text">
              {{ companyInfo.name && companyInfo.name.charAt(0) || '宠' }}
            </div>
          </div>
        </div>
      </section>

      <!-- 发展历程 -->
      <section class="timeline-section">
        <h2 class="section-title">发展历程</h2>
        
        <!-- Loading状态 -->
        <div v-if="loading" class="loading-section">
          <div class="loading-spinner"></div>
          <p>正在加载数据...</p>
        </div>
        
        <!-- 错误状态 -->
        <div v-else-if="error" class="error-section">
          <p>⚠️ 加载失败: {{ error }}</p>
          <el-button @click="fetchAboutData" type="primary" size="small">
            重新加载
          </el-button>
        </div>
        
        <!-- 发展历程内容 -->
        <div v-else class="timeline">
          <div 
            v-for="(milestone, index) in milestones"
            :key="index"
            class="timeline-item"
          >
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <div class="timeline-year">{{ milestone.year }}</div>
              <h3 class="timeline-title">{{ milestone.title }}</h3>
              <p class="timeline-description">{{ milestone.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 核心价值 -->
      <section class="values-section">
        <h2 class="section-title">核心价值</h2>
        <div class="values-grid">
          <div 
            v-for="value in coreValues"
            :key="value.id"
            class="value-card card-shadow"
          >
            <div class="value-icon">
              <el-icon><component :is="value.icon" /></el-icon>
            </div>
            <h3 class="value-title">{{ value.title }}</h3>
            <p class="value-description">{{ value.description }}</p>
          </div>
        </div>
      </section>

      <!-- 团队介绍 -->
      <section class="team-section">
        <h2 class="section-title">我们的团队</h2>
        <div class="team-grid">
          <div 
            v-for="member in teamMembers"
            :key="member.id"
            class="team-card card-shadow"
          >
            <div class="member-avatar-text">
              {{ member.initial || member.name.charAt(0) }}
            </div>
            <div class="member-info">
              <h3 class="member-name">{{ member.name }}</h3>
              <p class="member-position">{{ member.position }}</p>
              <p class="member-description">{{ member.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系信息 -->
      <section class="contact-section">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-grid">
          <div class="contact-item">
            <el-icon class="contact-icon"><Location /></el-icon>
            <div class="contact-info">
              <h4>公司地址</h4>
              <p>{{ contactInfo.address || '翻斗大街翻斗花园2号楼1001室' }}</p>
            </div>
          </div>
          
          <div class="contact-item">
            <el-icon class="contact-icon"><Phone /></el-icon>
            <div class="contact-info">
              <h4>联系电话</h4>
              <p>{{ contactInfo.phone || '400-888-9999' }}</p>
            </div>
          </div>
          
          <div class="contact-item">
            <el-icon class="contact-icon"><Message /></el-icon>
            <div class="contact-info">
              <h4>邮箱地址</h4>
              <p>{{ contactInfo.email || '495102569@qq.com' }}</p>
            </div>
          </div>
          
          <div class="contact-item">
            <el-icon class="contact-icon"><Clock /></el-icon>
            <div class="contact-info">
              <h4>服务时间</h4>
              <p>{{ contactInfo.workTime || '周一至周日 9:00-21:00' }}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { 
  Checked, 
  Star, 
  Trophy,
  Location,
  Phone,
  Message,
  Clock
} from '@element-plus/icons-vue'
import { aboutAPI } from '@/utils/api'

export default {
  name: 'AboutPage',
  components: {
    Checked,
    Star,
    Trophy,
    Location,
    Phone,
    Message,
    Clock
  },
  setup() {
    // 数据和加载状态
    const companyInfo = ref({})
    const milestones = ref([])
    const coreValues = ref([])
    const teamMembers = ref([])
    const contactInfo = ref({})
    
    const loading = ref(false)
    const error = ref(null)
    
    // 获取所有关于我们的数据
    const fetchAboutData = async () => {
      try {
        loading.value = true
        error.value = null
        
        const response = await aboutAPI.getAll()
        
        if (response.success) {
          const data = response.data
          companyInfo.value = data.companyInfo || {}
          milestones.value = data.milestones || []
          coreValues.value = data.coreValues || []
          teamMembers.value = data.teamMembers || []
          contactInfo.value = data.contactInfo || {}
          
          console.log('✅ 关于我们数据加载成功')
        } else {
          throw new Error(response.message || '获取数据失败')
        }
      } catch (err) {
        console.error('❌ 获取关于我们数据失败:', err)
        error.value = err.message
        
        // 失败时使用备用数据
        companyInfo.value = {
          name: '宠物商城',
          mission: '专业的宠物用品提供商，用心守护每一个毛孩子',
          features: ['高品质保障', '专业服务', '快速配送']
        }
        milestones.value = [
          { year: '2023', title: '公司成立', description: '宠物商城正式成立' },
          { year: '2025', title: '持续创新', description: '不断推出新产品和服务' }
        ]
      } finally {
        loading.value = false
      }
    }
    
    // 页面初始化
    onMounted(() => {
      console.log('关于我们页面加载完成')
      fetchAboutData()
    })
    
    return {
      companyInfo,
      milestones,
      coreValues,
      teamMembers,
      contactInfo,
      loading,
      error,
      fetchAboutData,
      // Element Plus icons
      Checked,
      Star,
      Trophy,
      Location,
      Phone,
      Message,
      Clock
    }
  }
}
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 60px;
  background: white;
  padding: 60px 40px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.page-title {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 15px;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #666;
}

/* 公司介绍 */
.company-intro {
  margin-bottom: 80px;
}

.intro-content {
  background: white;
  border-radius: 16px;
  padding: 60px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
}

.intro-text h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 20px;
}

.intro-text h3 {
  font-size: 1.5rem;
  color: #333;
  margin: 30px 0 20px;
}

.intro-text p {
  color: #666;
  line-height: 1.8;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.features-list {
  list-style: none;
  padding: 0;
}

.features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #555;
}

.feature-icon {
  color: #FFB300;
  margin-right: 12px;
  font-size: 1.2rem;
}

.intro-image {
  flex: 0 0 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 公司Logo文字 */
.company-logo-text {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF8C00, #FFB300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 20px rgba(255, 140, 0, 0.3);
  transition: all 0.3s ease;
}

.company-logo-text:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 140, 0, 0.4);
}

/* 发展历程 */
.timeline-section {
  margin-bottom: 80px;
  background: white;
  padding: 60px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 2rem;
  text-align: center;
  color: #333;
  margin-bottom: 50px;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.timeline-item {
  position: relative;
  padding-left: 80px;
  margin-bottom: 40px;
}

.timeline-marker {
  position: absolute;
  left: 21px;
  top: 8px;
  width: 18px;
  height: 18px;
  background: #FF8C00;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 3px #e0e0e0;
}

.timeline-year {
  color: #FF8C00;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.timeline-title {
  color: #333;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.timeline-description {
  color: #666;
  line-height: 1.6;
}

/* 核心价值 */
.values-section {
  margin-bottom: 80px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.value-card {
  background: white;
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #FF8C00, #FFB300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
}

.value-icon .el-icon {
  font-size: 2rem;
  color: white;
}

.value-title {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 15px;
}

.value-description {
  color: #666;
  line-height: 1.6;
}

/* 团队介绍 */
.team-section {
  margin-bottom: 80px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.team-card {
  background: white;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.team-card:hover {
  transform: translateY(-5px);
}

/* 团队成员文字头像 */
.member-avatar-text {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C00, #FFB300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.team-card:hover .member-avatar-text {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(255, 140, 0, 0.3);
}

.member-name {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 8px;
}

.member-position {
  color: #FF8C00;
  font-weight: 500;
  margin-bottom: 15px;
}

.member-description {
  color: #666;
  line-height: 1.6;
  font-size: 0.9rem;
}

/* 联系信息 */
.contact-section {
  background: white;
  padding: 60px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.contact-icon {
  color: #FF8C00;
  font-size: 1.5rem;
  margin-top: 5px;
}

.contact-info h4 {
  color: #333;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.contact-info p {
  color: #666;
  line-height: 1.6;
}

/* 加载和错误状态样式 */
.loading-section {
  text-align: center;
  padding: 80px 20px;
  color: #666;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #FF8C00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-section p {
  margin: 0;
  font-size: 1.1rem;
}

.error-section {
  text-align: center;
  padding: 80px 20px;
  color: #ff4757;
}

.error-section p {
  margin: 0 0 20px 0;
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-page {
    padding: 20px 0;
  }
  
  .page-header {
    padding: 40px 20px;
    margin-bottom: 40px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .intro-content {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 30px;
  }
  
  .timeline-section,
  .contact-section {
    padding: 40px 20px;
  }
  
  .timeline::before {
    left: 15px;
  }
  
  .timeline-item {
    padding-left: 50px;
  }
  
  .timeline-marker {
    left: 6px;
  }
  
  .values-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
</style>
